<template>
  <!-- 我的积分福分页面 -->
  <div class="box">
    <van-cell-group>
      <van-field
        type="digit"
        :label="'需要转化'+D_name+'数'"
        v-model="value"
        :placeholder="'请填写需转换'+D_name"
      />
    </van-cell-group>
    <div class="transformation_two">
      <span class="left">可转的{{D_name}}:</span>
      <span class="left">{{list.availableDscore}}</span>
      <span
        class="right"
        style="color:#0072ffe0"
        @click="showChange"
      >全部转换</span>
    </div>
    <div class="transformation_two">
      <span class="left">{{D_name}}:</span>
      <span class="left">福分</span>
      <span class="right">{{list.conversionRate}}:1</span>
    </div>
    <div class="transformation_two">
      <span class="left">可得福分</span>
      <span class="right">{{value/list.conversionRate}}</span>
    </div>
    <van-button
      round
      :style="{width:'95%',height:'5.5vh',lineHeight:'5.5vh',position:'fixed',bottom:'55px',left:'10px'}"
      color="#3C9BFB"
      @click="showMeritTransfer"
    >提交</van-button>
  </div>
</template>

<script type="text/javascript">
import { Button, Field, Cell, CellGroup } from "vant";
export default {
  data() {
    return {
      value: "",
      list: [],
      arr: [],
      num: 0,
      D_name: ""
    };
  },
  created() {
    this.D_name = localStorage.getItem("d_name");
    this.meritTransferSet();
    dd.biz.navigation.setTitle({
      title: "福分转换" //控制标题文本，空字符串表示显示默认文本
    });
    // this.meritTransfer();
  },
  methods: {
    showChange() {
      this.value = this.arr.availableDscore;
      this.num = this.arr.availableDscore;
      this.list.availableDscore = 0;
    },
    async showMeritTransfer() {
      let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      // const val = this.value;
      // this.num = val / this.list.conversionRate;
      const res = await this.$http.get(
        `yuepoints/meritTransfer?corpId=${corpId}&userId=${userId}&codeB=${this.value}`
      );
      this.$toast(res.data.errmsg);
      if (res.data.errcode == "0000") {
        this.$router.replace("/blessings");
      }
      // console.log(res)
    },
    async meritTransferSet() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/meritTransferSet?corpId=${corpId}&userId=${userId}`
      );
      this.list = res.data.data;
      this.arr = res.data.data;
    }
  },
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  }
};
</script>

<style lang="less" scoped>
.box {
  /deep/ .van-field__control {
    text-align: right;
    // padding-right: 10px;
  }
  /deep/ .van-cell {
    padding: 10px;
  }
  /deep/ .van-field__label {
    width: 29vw;
    font-size: 16px;
  }
  /deep/ .van-field__body {
    margin-left: 36vw;
  }
  .transformation_two {
    padding-left: 10px;
    padding-right: 20px;
    height: 44px;
    line-height: 44px;
    background: #fff;
    border-bottom: 1px solid #ebedf0;
    font-size: 16px;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
</style>
